<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="220px" style="position: relative;">
				<el-affix :offset="5">
					<img src="@/assets/images/logo.png" alt="logo" width="200px" height="90x"
						style="margin-bottom: 10px;" />
					<el-menu default-active="1" active-text-color="#242424">
						<el-menu-item index="1">
							<svg-icon icon-class="home"></svg-icon>
							<span>首页</span>
						</el-menu-item>
						<el-menu-item index="2">
							<svg-icon icon-class="gc"></svg-icon>
							<span>广场案例</span>
						</el-menu-item>
						<el-menu-item index="3">
							<svg-icon icon-class="jc"></svg-icon>
							<span>选材中心</span>
						</el-menu-item>
						<router-link to="/furnishing/index">
							<el-menu-item index="/furnishing/index">
								<svg-icon icon-class="jj"></svg-icon>
								<span>家居产品</span>
							</el-menu-item>
						</router-link>
						
						<el-sub-menu index="5">
							<template #title>
								<svg-icon icon-class="bz"></svg-icon>
								<span>岩板砖</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1">
									<svg-icon icon-class="dz"></svg-icon>
									<span>定制</span>
								</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
					</el-menu>
				</el-affix>
				<div class="user_box">
					<el-dropdown placement="top-start">
						<el-button class="userbtn"> <el-icon>
								<Avatar />
							</el-icon><span>个人中心</span></el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item><svg-icon icon-class="sc"></svg-icon> 我的收藏</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="xh"></svg-icon> 我的喜欢</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="xc"></svg-icon> 我的选材</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="sj"></svg-icon> 我的设计</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="gwc"></svg-icon> 购物车</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="dd"></svg-icon> 我的订单</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="set"></svg-icon> 账号设置</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-aside>
			<el-container>
				<el-header>
					<el-row style="width: 100%;">
						<el-col :span="12" :offset="4">
							<el-input class="search" v-model="search" style="width:100%; margin-top: 28px;" placeholder="搜索">
								<template #prefix>
									<el-icon>
										<Search />
									</el-icon>
								</template>
							</el-input>
						</el-col>
						<el-col :span="6" :offset="2">
							<div class="top_rlink">
								<el-link>帮助中心</el-link>
								<el-link>关于我们</el-link>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-main style="display: block;">
					<div style="width: 100%; height: 460px; padding-top: 20px;">
						<el-carousel class="bannerA clearfix" height="440px">
							<el-carousel-item v-for="(item, index) in bannerList" :key="index">
								<div class="banner_out">
									<div class="banner_box">
										<p>{{item.txt01}}</p>
										<div class="banner_txt clearfix">
											<span>{{item.txt02}}</span><span>{{item.txt03}}</span></div>
									</div>
									<el-image style="width: 100%; height:auto" :src="item.img" fit="fill" />
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
					<div class="home_tit">家居</div>
					<div class="banner_two">
						<el-row :gutter="20">
							<el-col :span="14">
								<el-carousel class="bannerA clearfix" height="360px">
									<el-carousel-item v-for="(item, index) in bannerListtwo" :key="index">
										<div class="banner_out">
											<div class="banner_twobox">
												<p>{{item.txt01}}</p>
											</div>
											<el-image style="width: 100%; height:auto" :src="item.img" fit="fill" />
										</div>
									</el-carousel-item>									
								</el-carousel>
							</el-col>
							<el-col :span="10">
								<div class="banner_right">
									<div class="banner_rtxt">餐桌现货每周上新</div>
									<el-image src="./src/assets/images/home01.jpg" fit="fill" />
								</div>
								<div class="banner_right">
									<div class="banner_rtxt" style="bottom: 0px;">茶几现货每周上新</div>
									<el-image src="./src/assets/images/home02.jpg" fit="fill" />
								</div>
							</el-col>
						</el-row>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
	<el-footer class="pagefooter">Footer</el-footer>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted, onUnmounted, reactive } from 'vue'
	import { useRouter } from 'vue-router'
	import type { ImageProps, TabsPaneContext, ElCheckbox } from 'element-plus'
	const router = useRouter()
	const checked2 = ref(false)
	const search = ref('')
	const bannerListtwo = [
		{
			txt01:'个性化家居设计     设计案例',
			img: './src/assets/images/bannertwo01.jpg'
		},{
			txt01:'个性化家居设计     设计案例',
			img: './src/assets/images/bannertwo02.jpg'
		}
	]
	const bannerList = [
		{
			txt01: '芬迪蓝',
			txt02: '纳米比亚特定矿脉',
			txt03: '冰川蓝纹的天然艺术',
			img: './src/assets/images/banner01.jpg'
		}, {
			txt01: '芬迪蓝',
			txt02: '纳米比亚特定矿脉',
			txt03: '冰川蓝纹的天然艺术',
			img: './src/assets/images/banner02.jpg'
		}
	]
</script>

<style lang="scss"></style>